<template>
<div class="">
  <div class="info-title">培训报名列表</div>
  <el-card class="full-height full-width">
    <search-table class="full-height full-width"
      :table-loading="loading"
      :tableData="tableData"
      :ref="tableRef"
      :labelWidth="'40px'"
      :row-keys="row => row.id"
      @query="currentPage = 1; query();">
      <template >
        <el-table-column prop="name" label="比赛" width="200"/>
        <el-table-column prop="province" label="省份"/>
        <el-table-column prop="createBy" label="单位"/>
        <el-table-column prop="cost" label="费用"/>
        <el-table-column prop="status" label="状态"/> 
        <el-table-column label="操作" width="350">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="handleAddCost(scope.$index, scope.row)">上传缴费信息</el-button>
            <el-button
              size="mini"
              type="primary"
              @click="handleEditTrain(scope.$index, scope.row)">修改</el-button>
            <el-button
              size="mini"
              type="success"
              @click="handleSubmitApply(scope.$index, scope.row)">提交报名</el-button>
              <el-button
              v-if="scope.row.status == '草稿'"
              size="mini"
              type="danger"
              @click="handleDeleteApply(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </template>
      <template v-slot:footer>
        <el-pagination
          background
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </template>
    </search-table>
    <el-dialog  :close-on-click-modal="false" title="项目列表" :visible.sync="projectDialog">
      <el-table :data="projectData">
        <el-table-column property="type" label="大类" width="150"></el-table-column>
        <el-table-column property="projectName" label="项目" width="200"></el-table-column>
        <el-table-column property="groups" label="组别"></el-table-column>
        <el-table-column label="操作(只能上传MP3文件)" width="350">
          <template slot-scope="scope">
            <el-upload
              class="upload-demo"
              action="#"
              :limit = "1"
              :http-request="
                (file) => {
                  return uploadFile(file,scope.row);
                }
              "
              :beforeUpload="beforeUploadMp3">
              <el-button type="primary">点击上传</el-button>
            </el-upload>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog  :close-on-click-modal="false" title="缴费凭证" :visible.sync="costDialog">
      <el-upload
      action="#"
      :multiple="false"
      :limit = "1"
      ref="costUpload"
      list-type="picture-card"
      :file-list="fileList"
      :http-request="
      (file) => {
        return clickUp(file);
      }"
      :auto-upload="false"
      :beforeUpload="beforeUploadCost">
        <i slot="default" class="el-icon-plus"></i>
        <div slot="file" slot-scope="{file}">
          <img
            class="el-upload-list__item-thumbnail"
            :src="file.url" alt=""
          >
          <span class="el-upload-list__item-actions">
            <span
              class="el-upload-list__item-preview"
              @click="handlePictureCardPreview(file)"
            >
              <i class="el-icon-zoom-in"></i>
            </span>
            <span
              v-if="!disabled"
              class="el-upload-list__item-delete"
              @click="handleDownload(file)"
            >
              <i class="el-icon-download"></i>
            </span>
            <span
              v-if="!disabled"
              class="el-upload-list__item-delete"
              @click="handleRemove(file)"
            >
              <i class="el-icon-delete"></i>
            </span>
          </span>
        </div>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
      <!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUploadCost">上传缴费凭证</el-button> -->

      <el-dialog  :close-on-click-modal="false" append-to-body :visible.sync="innerVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
      <div slot="footer" class="dialog-footer">
        <el-button @click="costDialog = false">取 消</el-button>
        <el-button type="primary" @click="submitUploadCost">上 传</el-button>
      </div>
    </el-dialog>
  </el-card>
</div>
</template>
<script>
import { mapState } from 'vuex'
import http from '@/utils/baseUrl'
import searchTable from '@/components/PublicTable/index.vue'
import {getJoinList,submitTrain,uploadPayPic,deleteTrain} from "@/api/train";
import { Message} from "element-ui";
export default{
  components:{
    searchTable,
  },
  data () {
    return {
      url:http,
      tableData: [],
      loading: false,
      applyId:'',
      tableRef: 'tableRef',
      searchForm: {},
      currentPage: 1,
      pageSizes: [10, 20, 50],
      pageSize: 10,
      total: 0,
      selectionList:[], //定义删除/批量删除
      projectDialog:false,
      costDialog:false,
      projectData:[],
      fileName:'',
      dialogImageUrl: '',
      innerVisible: false,
      disabled: false,
      upCost:new FormData(),
      fileList:[]
    }
  },
  created() {
    this.query()
    this.vehicleAction = ''//上传图片的接口ur
  },
  computed:{
    ...mapState({
      user:state => state.user.userInfo
    })
  },
  methods: {
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.innerVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
    query() {
      // 请求表格数据
      var params ={
        'pageNum': this.currentPage,
        'pageSize': this.pageSize,
        'name':this.searchForm.name,
        'tel':this.searchForm.tel,
        'sex':this.searchForm.sex
      }
      getJoinList(params).then(res => {
        // 把请求到的数据给testDatas数组
        this.tableData = res.data.list
        // 当前页数
        this.currentPage = res.data.pageNum
        // 当前页数量
        this.pageSize = res.data.pageSize
        // 分页总数
        this.total = res.data.total
      //   console.log(JSON.stringify(res.data.data.total))
      })
      .catch((error) => {
        console.log(error)
      })
    },
    handleSizeChange(val) {
      // 改变每页条数
      this.pageSize = val
      this.query()
    },
    handleCurrentChange(val) {
      // 切换页码
      this.currentPage = val
      this.query()
    },
    // 上传缴费信息
    handleAddCost(index,row) {
      this.costDialog = true
      this.applyId = row.id
      let newObj = {}
      newObj.url = this.url + row.filePayUrl
      this.fileList.push(newObj)
    },
    //  文件上传
    uploadFile(file,row) {
      this.fileName = file.file.name;
      const formData = new FormData();
      formData.append("file", file.file);
      formData.append("id", row.id);
      const onUploadProgress = progressEvent => {
        const complete = parseInt(
          ((progressEvent.loaded / progressEvent.total) * 100) | 0,
          10
        )
        file.onProgress({ percent: complete })
      }
    },
    beforeUploadCost(file) {
      let fileSize = file.size / 1024 / 1024;
      let isXls =
        file.name.split(".")[file.name.split(".").length - 1] === "jpg";
      if (!isXls) {
        this.$message.warning("上传文件只能是jpg格式！");
        return;
      }
      if (fileSize > 10) {
        this.$message.warning("文件超过10MB,请重新上传！");
        return;
      }
    },
    clickUp(file) {
      this.fileName = file.file.name;
      const formData = new FormData();
      formData.append("file", file.file);
      formData.append("id", this.applyId);
      uploadPayPic(formData).then(res => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "上传成功",
          });
          this.costDialog = false
        } else {
          this.$message({
            type: "error",
            message: "上传失败",
          });
          this.costDialog = false
        }
      })
    },
    // 凭证上传
    submitUploadCost() {
      this.$refs.costUpload.submit()
    },
    handleSubmitApply(index,row) {
      let params = {
        id: row.id
      }
      submitTrain(params).then(res => {
        if (res.code == 200) {
          this.query()
          this.$message({
            type: "success",
            message: "提交成功",
          });
        } else {
          this.$message({
            type: "error",
            message: "提交失败",
          });
        }
      })
    },
    handleDeleteApply(index,row) {
      let params = {
        id: row.id
      }
      deleteTrain(params).then(res => {
        if (res.code == 200) {
          this.query()
          this.$message({
            type: "success",
            message: "提交成功",
          });
        } else {
          this.$message({
            type: "error",
            message: "提交失败",
          });
        }
      })
    },
    handleEditTrain(index,row) {
      this.$router.push({name:'choosetraining',params:{id:row.trainId,joinId:row.id}})
    }
  }
}
</script>
<style>
.info-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
}
.upload-demo {
  display: flex;
  align-items:center;
  justify-content: space-between;
}
.el-upload-list__item:first-child {
  margin-top: 0;
}
</style>